<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<!-- 设置IE渲染方式默认为最高 除IE6： -->
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<!-- 兼容移动设备的展示效果： -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	
	<!-- 若页面需默认用极速核，增加标签： -->
	<meta name="renderer" content="webkit">

	<title>My UI Demo</title>

	<!-- 引入CSS -->
    <link href="css/mui.css" rel="stylesheet">
    <link href="css/demo.css" rel="stylesheet">

    <!-- 引入字体图标文件 -->
    <link href="css/micon.css" rel="stylesheet"> 
    <style>

		@font-face {
		  font-family: 'iconfont';
		  src: url('font/iconfont.eot');
		  src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
		  url('font/iconfont.woff') format('woff'),
		  url('font/iconfont.ttf') format('truetype'),
		  url('font/iconfont.svg#iconfont') format('svg');
		}

    </style>

    <!-- 加载兼容文件：因为IE8既不支持HTML5 也不支持CSS3 Media，所以需要加载两个JS文件，来保证代码实现兼容效果：2017-06-30更新 -->
    <!-- WARNING: Respond.js 不能通过 file:// 协议访问 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
	
	<div class="container-fluid">
		<!-- 栅格 -->
		<!-- col -->
		<h1 id="col">栅格 <small>col-</small> </h1>
		<p>随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多24列。所有“列（column）必须放在 <code>.row</code> 内。</p>
		<div class="sample">
			<div class="row">
				<div class="col-s-2">.col-s-2</div>
				<div class="col-s-2">.col-s-2</div>
				<div class="col-s-2">.col-s-2</div>
				<div class="col-s-2">.col-s-2</div>
				<div class="col-s-2">.col-s-2</div>
				<div class="col-s-2">.col-s-2</div>
				<div class="col-s-2">.col-s-2</div>
				<div class="col-s-2">.col-s-2</div>
				<div class="col-s-2">.col-s-2</div>
				<div class="col-s-2">.col-s-2</div>
				<div class="col-s-2">.col-s-2</div>
				<div class="col-s-2">.col-s-2</div>
				<div class="col-m-16">.col-m-16</div>
				<div class="col-x-12 col-m-8">.col-x-12 .col-m-8</div>
				<div class="col-x-12 col-m-8">.col-x-12 .col-m-8</div>
				<div class="col-x-12 col-m-8">.col-x-12 .col-m-8</div>
				<div class="col-x-12 col-m-8">.col-x-12 .col-m-8</div>
				<div class="col-x-12">.col-x-12</div>
				<div class="col-x-12">.col-x-12</div>
			</div>
		</div>


		<!-- 样式 -->
		<!-- btn -->
		<h1 id="buttons">按钮 <small>btn</small> </h1>
		<p>创建一个带有预定义样式的按钮。</p>
		<div class="sample">
			<button type="button" class="btn btn-default">
			（默认样式）Default</button>
			<button type="button" class="btn btn-green">
			（绿）green</button>
			<button type="button" class="btn btn-blue">
			（蓝）blue</button>
			<button type="button" class="btn btn-yellow">
			（黄）yellow</button>
			<button type="button" class="btn btn-red">
			（红）red</button>
			<button type="button" class="btn btn-black">
			（黑）black</button>
			<button type="button" class="btn btn-link">
			（链接）link</button>
		</div>


		<!-- form -->
		<h1 id="forms">表单 <small>form</small> </h1>
		<p>单独的表单控件会被自动赋予一些全局样式。</p>

		<h2>基本表单 <small>form-base</small> </h2>
		<div class="sample">
			<form class="form-base">
				<table>
					<tbody>
						<tr>
							<td>
								<label class="title">Email address</label>
								<input class="form-input" type="email" name="email" placeholder="Email">
								<span class="icon-form iconfont" aria-hidden="true"></span>
							</td>
						</tr>
						<tr>
							<td>
								<label class="title">Password</label>
								<input class="form-input" type="password" name="password" placeholder="Password">
								<span class="icon-form iconfont" aria-hidden="true"></span>
							</td>
						</tr>
						<tr>
							<td>
								<label class="title">File input</label>
						        <input class="file" type="file">
						        <p class="help-block">Example block-level help text here.</p>
							</td>
						</tr>
						<tr>
							<td>
								<label class="checkbox"><input type="checkbox"> Check me out</label>
							</td>
						</tr>
						<tr>
							<td>
								<button type="submit" class="btn btn-default">Sign in</button>
							</td>
						</tr>
					</tbody>
				</table>
			</form>
		</div> <!-- 基本表单 -->

		<h2>内联表单 <small>form-inline</small> </h2>
		<div class="sample">
			<form class="form-inline" id="">
				<table>
					<tbody>
						<tr>
							<td>
								<label class="title">Email address</label>
								<input class="form-input" type="text" placeholder="Email">
							</td>
							<td>
								<label class="title">Password</label>
								<input class="form-input" type="password" placeholder="Password">
							</td>
							<td>
								<label><input type="checkbox"> Check me out</label>
							</td>
							<td>
								<button type="submit" class="btn btn-default">Submit</button>
							</td>
						</tr>
					</tbody>
				</table>
			</form>
		</div> <!-- 内联表单 一 -->
		
		<h2>水平排列表单 <small>form-multi-row</small> </h2>
		<div class="sample">
			<form class="form-multi-row">
				<table>
					<tbody>
						<tr>
							<td>
								<label class="title">Email address</label>
								<input class="form-input" type="text" name="email" placeholder="Email">
							</td>
						</tr>
						<tr>
							<td>
								<label class="title">Password</label>
								<input class="form-input" type="password" name="password" placeholder="Password">
							</td>
						</tr>
						<tr>
							<td>
								<label class="title"></label>
								<label class="checkbox"><input type="checkbox"> Check me out</label>
							</td>
						</tr>
						<tr>
							<td>
								<label class="title"></label>
								<button type="submit" class="btn btn-default">Sign in</button>
							</td>
						</tr>
					</tbody>
				</table>
			</form>
		</div> <!-- 水平排列表单 -->

		<h2>文本域 <small>textarea</small> </h2>
		<p>支持多行文本的表单控件。可根据需要改变 <code>rows</code> 属性。</p>
		<div class="sample">
			<form>
				<textarea class="form-input" rows="3" placeholder="Textarea"></textarea>
			</form>
		</div> <!-- 文本域 -->

		<h2>多选和单选框 <small>checkbox and radio</small> </h2>
		<p>多选框（checkbox）或单选框（radio）控件要放在 <code>&lt;label&gt;</code> 内，并添加 <code>.checkbox</code> 或 <code>.radio</code> 类。</p>
		<div class="sample">
			<form>
	    		<label class="checkbox">
				  <input type="checkbox" id="Checkbox1" value="option1" checked> Option one is this and that—be sure to include why it's great
				</label>
				<label class="checkbox">
				  <input type="checkbox" id="Checkbox2" value="option2"> 
				  Option two can be something else and selecting it will deselect option one
				</label>
				<label class="checkbox">
				  <input type="checkbox" id="Checkbox3" value="option3"> 
				  Option two can be something else and selecting it will deselect option one
				</label>
	    	</form>
	    		<br>
	    	<form>	
	    		<label class="radio">
				  <input type="radio" name="inlineRadioOptions" id="Radio1" value="option1" checked> 
				  Option one is this and that—be sure to include why it's great
				</label>
				<label class="radio">
				  <input type="radio" name="inlineRadioOptions" id="Radio2" value="option2"> 
				  Option two can be something else and selecting it will deselect option one
				</label>
				<label class="radio">
				  <input type="radio" name="inlineRadioOptions" id="Radio3" value="option3"> 
				  Option two can be something else and selecting it will deselect option one
				</label>
			</form>
		</div> <!-- 多选和单选框 -->

		<p>添加 <code>.checkbox-inline</code> 或 <code>.radio-inline</code> 类到一系列的多选框（checkbox）或单选框（radio）控件上，使这些控件有序地排列在一行。</p>
		<div class="sample">
			<form>
	    		<label class="checkbox-inline">
				  <input type="checkbox" id="Checkbox1" value="option1" checked> 1
				</label>
				<label class="checkbox-inline">
				  <input type="checkbox" id="Checkbox2" value="option2"> 2
				</label>
				<label class="checkbox-inline">
				  <input type="checkbox" id="Checkbox3" value="option3"> 3
				</label>
	    	</form>
	    		<br>
	    	<form>	
	    		<label class="radio-inline">
				  <input type="radio" name="inlineRadioOptions" id="Radio1" value="option1" checked> 1
				</label>
				<label class="radio-inline">
				  <input type="radio" name="inlineRadioOptions" id="Radio2" value="option2"> 2
				</label>
				<label class="radio-inline">
				  <input type="radio" name="inlineRadioOptions" id="Radio3" value="option3"> 3
				</label>
			</form>
		</div> <!-- 多选和单选框 inline -->

		<h2>下拉列表 <small>select</small> </h2>
		<div class="sample">
			<form>
	    		<select class="form-input">
				  <option>1</option>
				  <option>2</option>
				  <option>3</option>
				  <option>4</option>
				  <option>5</option>
				</select>
			</form>
		</div> <!-- 下拉列表 -->


		<!-- table -->
		<h1 id="tables">表格 <small>table</small> </h1>
		<p>为任意 <code>table</code> 标签添加 <code>.table</code> 类可以为其赋予基本的样式</p>
		<div class="sample">
			<table class="table">
		      <caption>Optional table caption.</caption>
		      <thead>
		        <tr>
		          <th>#</th>
		          <th>First Name</th>
		          <th>Last Name</th>
		          <th>Username</th>
		        </tr>
		      </thead>
		      <tbody>
		        <tr>
		          <th scope="row">1</th>
		          <td>Mark</td>
		          <td>Otto</td>
		          <td>@mdo</td>
		        </tr>
		        <tr>
		          <th scope="row">2</th>
		          <td>Jacob</td>
		          <td>Thornton</td>
		          <td>@fat</td>
		        </tr>
		        <tr>
		          <th scope="row">3</th>
		          <td>Larry</td>
		          <td>the Bird</td>
		          <td>@twitter</td>
		        </tr>
		      </tbody>
		    </table>
		</div> <!-- 基本表格 -->

		<p>添加 <code>.table-bordered</code> 类为表格和其中的每个单元格增加边框。</p>
		<div class="sample">
			<table class="table table-bordered">
		      <caption>Optional table caption.</caption>
		      <thead>
		        <tr>
		          <th>#</th>
		          <th>First Name</th>
		          <th>Last Name</th>
		          <th>Username</th>
		        </tr>
		      </thead>
		      <tbody>
		        <tr>
		          <th scope="row">1</th>
		          <td>Mark</td>
		          <td>Otto</td>
		          <td>@mdo</td>
		        </tr>
		        <tr>
		          <th scope="row">2</th>
		          <td>Jacob</td>
		          <td>Thornton</td>
		          <td>@fat</td>
		        </tr>
		        <tr>
		          <th scope="row">3</th>
		          <td>Larry</td>
		          <td>the Bird</td>
		          <td>@twitter</td>
		        </tr>
		      </tbody>
		    </table>
		</div> <!-- 有边框表格 -->


		<!-- image -->
		<h1 id="images">图片 <small>image</small> </h1>
		<p>通过为图片添加 <code>.img</code> 类可以让图片支持响应式布局。通过为 <code>&lt;img&gt;</code> 元素添加 <code>.img-rounded</code> <code>.img-circle</code> <code>.img-thumbnail</code> 类，可以让图片呈现不同的形状。</p>
		<div class="sample">
			<img src="images/img.jpg" alt="img-rounded" class="img-rounded">
			<img src="images/img.jpg" alt="img-circle" class="img-circle">
			<img src="images/img.jpg" alt="img-thumbnail" class="img-thumbnail">
		</div>


		<!-- support -->
		<h1 id="supports">辅助类 <small>support</small> </h1>
		<p>常用的辅助类组件。可以应用于链接，并且在鼠标经过时颜色可以加深，就像默认的链接一样。</p>
		<h2>情境文本色 <small>text-</small> </h2>
		<div class="sample">
			<p class="text-green">绿色文本 Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
			<p class="text-blue">蓝色文本 Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
			<p class="text-yellow">黄色文本 Etiam porta sem malesuada magna mollis euismod.</p>
			<p class="text-red">红色文本 Donec ullamcorper nulla non metus auctor fringilla.</p>
			<p class="text-link">链接文本 Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
		</div>

		<h2>情境背景色 <small>bg-</small> </h2>
		<div class="sample">
			<p class="bg-green">绿色背景 Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
			<p class="bg-blue">蓝色背景 Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
			<p class="bg-yellow">黄色背景 Etiam porta sem malesuada magna mollis euismod.</p>
			<p class="bg-red">红色背景 Donec ullamcorper nulla non metus auctor fringilla.</p>
			<p class="bg-black">黑色背景 Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
			<p class="bg-link">链接背景 Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
		</div>

		<h2>关闭按钮 <small>close</small> </h2>
		<div class="sample">
			<button class="close" type="button" aria-label="Close" onclick="">&times;</button>
		</div>
		
		<!-- 组件 -->
		<!-- dropdown -->
		<h1 id="dropdown">下拉菜单 <small>dropdown</small> </h1>
		<p>将下拉菜单触发器和下拉菜单都包裹在 <code>.dropdown</code> 里。</p>
		
		<h2>点击下拉菜单 <small>dropdown-toggle</small> </h2>
		<p>给菜单添加 <code>.dropdown-toggle</code> 实现点击时切换子菜单 <code>.dropdown-toggle-menu</code> 。</p>
		<div class="sample">
			<div class="dropdown">
			  <button class="btn btn-default dropdown-toggle" type="button">
			    Dropdown
			    <span class="caret"></span>
			  </button>
			  <ul class="dropdown-toggle-menu">
			    <li><a href="JavaScript:;">Action</a></li>
			    <li><a href="JavaScript:;">Another action</a></li>
			    <li><a href="JavaScript:;">Something else here</a></li>
			  </ul>
			</div>
		</div> <!-- 点击下拉菜单 -->

		<h2>悬停下拉菜单 <small>dropdown-hover & dropdown-float</small> </h2>
		<p>给菜单添加 <code>.dropdown-hover</code> 实现鼠标移进移出时切换子菜单 <code>.dropdown-hover-menu</code> 。</p>
		<div class="sample">
			<div class="dropdown">
			  <div class="btn btn-default dropdown-hover">
			    Dropdown1
			    <span class="caret"></span>
			    <ul class="dropdown-hover-menu">
				  <li><a href="JavaScript:;">Action</a></li>
				  <li><a href="JavaScript:;">Another action</a></li>
				  <li><a href="JavaScript:;">Something else here</a></li>
				</ul>
			  </div>
			  <div class="btn btn-red dropdown-hover">
			    Dropdown2
			    <span class="caret text-white"></span>
			    <ul class="dropdown-hover-menu">
				  <li><a href="JavaScript:;">Action</a></li>
				  <li><a href="JavaScript:;">Another action</a></li>
				  <li><a href="JavaScript:;">Something else here</a></li>
				</ul>
			  </div>
			</div>
		</div> <!-- 悬停下拉菜单 -->

		<p>给菜单添加 <code>.dropdown-float</code> 使子菜单 <code>.dropdown-float-menu</code> 浮动在一行。</p>
		<div class="sample">
			<ul class="dropdown">
			  <li class="btn dropdown-float">
			    Dropdown1
			    <span class="caret"></span>
			    <ul class="dropdown-float-menu">
				  <li><a href="JavaScript:;">Action</a></li>
				  <li><a href="JavaScript:;">Another action</a></li>
				  <li><a href="JavaScript:;">Something else here</a></li>
				</ul>
			  </li>
			  <li class="btn dropdown-float">
			    Dropdown2
			    <span class="caret"></span>
			    <ul class="dropdown-float-menu">
				  <li><a href="JavaScript:;">Action</a></li>
				  <li><a href="JavaScript:;">Another action</a></li>
				  <li><a href="JavaScript:;">Something else here</a></li>
				</ul>
			  </li>
			  <li class="btn dropdown-float">
			    Dropdown3
			    <span class="caret"></span>
			    <ul class="dropdown-float-menu">
				  <li><a href="JavaScript:;">Action</a></li>
				  <li><a href="JavaScript:;">Another action</a></li>
				  <li><a href="JavaScript:;">Something else here</a></li>
				</ul>
			  </li>
			</ul>
		</div> <!-- 浮动下拉菜单 -->
		
		<!-- input-group -->
		<h1 id="input-group">输入框组 <small>input-group</small> </h1>
		<p>在输入框的任意一侧添加额外元素或按钮。你还可以在输入框的两侧同时添加额外元素。</p>
		<p>输入框组嵌套在 <code>.input-group</code> 内，输入框前后添加 <code>.addon-pre</code> 或 <code>.addon-aft</code> 形成组合。</p>
		<div class="sample">
			<div class="input-group">
				<button class="btn-default addon-pre">Go!</button>
				<input class="form-input" type="text">
				<button class="btn-default addon-aft">Go!</button>
			</div>
	    </div><!-- /input-group 1 -->

		<div class="sample">
			<div class="input-group">
				<input class="addon-pre" type="button" value="@">
				<input class="form-input" type="text">
				<input class="addon-aft" type="button" value=".00">
			</div>
		</div> <!-- /input-group 2 -->

		<!-- btn-group -->
		<h1 id="btn-group">按钮组 <small>btn-group</small> </h1>
		<p>通过按钮组容器 <code>.btn-group</code> 把按钮放在同一组里。</p>
		<div class="sample">
			<div class="btn-group">
				<button class="btn btn-default">1</button>
				<button class="btn btn-default">2</button>
				<button class="btn btn-default">3</button>
				<button class="btn btn-default">4</button>
				<button class="btn btn-default">5</button>
				<button class="btn btn-default">6</button>
			</div>
	    </div>
	    <h2>分页 <small>pagination</small> </h2>
		<p>带有展示页码的分页组件。</p>
		<div class="sample">
			<ul class="pagination">
				<li>
			      <a href="javascript:;">&laquo;
			      </a>
			    </li>
			    <li><a href="javascript:;">1</a></li>
			    <li><a href="javascript:;">2</a></li>
			    <li><a href="javascript:;">3</a></li>
			    <li><a href="javascript:;">4</a></li>
			    <li><a href="javascript:;">5</a></li>
			    <li>
			      <a href="javascript:;">&raquo;
			      </a>
			    </li>
			</ul>
	    </div>

	    <!-- nav -->
	    <h1 id="nav">导航标签 <small>nav</small> </h1>
		<p>导航组件都依赖 <code>.nav</code> 类。</p>

		<h2>基本标签 <small>nav-tabs</small> </h2>
		<p>给 <code>.nav</code> 添加 <code>.nav-tabs</code> 类。</p>
		<div class="sample">
			<ul class="nav nav-tabs">
				<li class="active"><a href="javascript:;">Home</a></li>
				<li><a href="javascript:;">Profile</a></li>
				<li><a href="javascript:;">Messages</a></li>
			</ul>
	    </div>

	    <h2>胶囊式标签 <small>nav-pills & nav-stacked</small> </h2>
		<p>给 <code>.nav</code> 添加 <code>.nav-pills</code> 类。</p>
		<div class="sample">
			<ul class="nav nav-pills">
				<li class="active"><a href="javascript:;">Home</a></li>
				<li><a href="javascript:;">Profile</a></li>
				<li><a href="javascript:;">Messages</a></li>
			</ul>
	    </div>
	    <p>给 <code>.nav</code> 添加 <code>.nav-stacked</code> 类，使标签垂直方向堆叠排列。</p>
		<div class="sample">
			<ul class="nav nav-stacked">
				<li class="active"><a href="javascript:;">Home</a></li>
				<li><a href="javascript:;">Profile</a></li>
				<li><a href="javascript:;">Messages</a></li>
			</ul>
	    </div>

		<!-- navbar -->
		<h1 id="navbar">导航栏 <small>navbar</small> </h1>
		<p>导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠，且在视口（viewport）宽度增加时逐渐变为水平展开模式。</p>
		<div class="sample">
			<nav class="navbar">
				<div class="navbar-header">
					<a class="navbar-brand" href="javascript:;"><img src="images/brand.jpg"></a>
					<!-- 768折叠 -->
					<button type="button" class="navbar-toggle collapsed">
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				    </button>
				</div>
				<!-- 768展开 -->
				<div class="navbar-spread">
					<ul class="nav navbar-nav">
						<li class="active"><a href="javascript:;">Link</a></li>
						<li><a href="javascript:;">Link</a></li>
						<li><a href="javascript:;">Link</a></li>
					</ul>
					<div class="navbar-form navbar-left">
						<input class="form-input" type="text" placeholder="Search">
						<button class="btn btn-default">Submit</button>
					</div>
					<ul class="nav navbar-right">
						<li><a href="javascript:;">Link</a></li>
						<li><a href="javascript:;">Link</a></li>
						<li class="dropdown">
						  <a href="javascript:;" class="dropdown-toggle">
						    Dropdown
						    <span class="caret"></span>
						  </a>
						  <ul class="dropdown-toggle-menu dropdown-menu">
						    <li><a href="JavaScript:;">Action</a></li>
						    <li><a href="JavaScript:;">Another action</a></li>
						    <li><a href="JavaScript:;">Something else here</a></li>
						  </ul>
						</li>
					</ul>
				</div>
			</nav>
		</div>

		<!-- route -->
		<h1 id="route">路径导航 <small>route</small> </h1>
		<p>在一个带有层次的导航结构中标明当前页面的位置。</p>
		<div class="sample">
			<ol class="route">
			  <li><a href="javascript:;">Home</a></li>
			  <li><a href="javascript:;">Library</a></li>
			  <li class="active">Data</li>
			</ol>
		</div>

		<!-- label -->
		<h1 id="label">标签 <small>label</small> </h1>
		<p></p>
		<div class="sample">
			<h3>Example heading <span class="label label-default">New</span></h3>
			<span class="label label-default">Default</span>
			<span class="label label-green">Green</span>
			<span class="label label-blue">Blue</span>
			<span class="label label-yellow">Yellow</span>
			<span class="label label-red">Red</span>
			<span class="label label-black">Black</span>
		</div>

		<!-- Modal -->
		<h1>模态框 <small>Modal</small> </h1>
		<p></p>
		<div class="sample">
			<div class="example-modal">
				<div class="modal-dialog">
					<div class="modal-content">
					  	<div class="modal-body">
					      Basic modal example
					    </div>
					</div>
				</div>
			</div>
		</div>

		<p>以下模态框包含了模态框的头、体和一组放置于底部的按钮。</p>
		<div class="sample">
			<div class="example-modal">
				<div class="modal-dialog">
					<div class="modal-content">
					  	<div class="modal-header">
					        <button type="button" class="close" aria-label="Close"><span>&times;</span></button>
					        <h4 class="modal-title">Modal title</h4>
					    </div>
					  	<div class="modal-body">
					    	Basic modal example
					    </div>
					    <div class="modal-footer">
					        <button type="button" class="btn btn-default">Close</button>
					        <button type="button" class="btn btn-black">Save changes</button>
					    </div>
					</div>
				</div>
			</div>
		</div>

		<h2>动态实例</h2>
		<p>点击下面的按钮即可通过 JavaScript 启动一个模态框。</p>
		<div class="sample">
			<div id="SystemModal" class="modal">
				<div class="modal-dialog">
					<div class="modal-content">
					  	<div class="modal-header">
					        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
					        <h4 class="modal-title">Modal title</h4>
					    </div>
					  	<div class="modal-body">
					    	Basic modal example
					    </div>
					    <div class="modal-footer">
					        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					        <button type="button" class="btn btn-yellow">Save changes</button>
					    </div>
					</div>
				</div>
			</div>
			<button type="button" class="btn btn-yellow" data-toggle="modal" data-target="#SystemModal">
		      Launch demo modal
		    </button>
		</div>

	</div>



	<!-- jQuery (necessary for JavaScript plugins) -->
    <script src="js/jquery-3.1.1.min.js"></script>
    <!-- mui js -->
    <script src="js/mui.js"></script>
    <!-- 表单验证 -->
    
    
</body>
</html>